<template>
  <div class="">
    <div class="mx-auto max-w-7xl">
      <div class="lg:px-0 flex justify-between items-center p-4 w-full">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="flex items-center">
          <el-breadcrumb-item class="flex items-center" :to="{ path: localePath('/') }">
            <div class="flex items-center">
              <i class="el-icon-s-home mr-1 text-lg"></i>
            </div>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="flex items-center whitespace-nowrap" :to="{ path: localePath('/game') }">
            {{ $t('pages.gamelist') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item class="capitalize"> {{ detailInfo.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="lg:gap-12 flex flex-col gap-6">
      <div class="lg:h-[22.5rem] relative max-lg:h-[13rem]">
        <!-- 顶图 -->
        <!-- 顶图 -->
        <!-- 顶图 -->
        <div class="absolute top-0 left-0 z-10 w-full h-full">
          <img
            loading="lazy"
            class="size-full"
            :src="$globalFn.imgPrefixUrl(detailInfo.banner_image ? detailInfo.banner_image : detailInfo.image)"
            alt="Game banner image"
            title="Game background banner"
          />
        </div>
        <div class="bg-black/70 absolute top-0 left-0 z-20 w-full h-full backdrop-blur-xl">
          <div class="lg:py-6 max-lg:p-4 flex z-10 gap-4 items-end mx-auto max-w-7xl h-full">
            <div
              class="lg:w-[12rem] rounded-[0.75rem] border overflow-hidden max-lg:aspect-[4.5/6] lg:h-[88%] max-lg:h-full flex-none border-white/30 border-solid"
            >
              <img
                loading="lazy"
                class="size-full"
                :src="$globalFn.imgPrefixUrl(detailInfo.image, '180:240')"
                :title="`${detailInfo.seo_title}`"
                :alt="`${detailInfo.seo_keyword}${detailInfo.seo_description}`"
              />
            </div>
            <div class="lg:gap-6 flex flex-col gap-5">
              <h1 class="font-semibold lg:text-[1.75rem] text-[0.88rem] text-white">
                {{ detailInfo.title }}
              </h1>
              <div class="flex gap-1 items-center" v-if="detailInfo?.region?.icon">
                <div class="size-[1rem]">
                  <img
                    :src="$globalFn.imgPrefixUrl(detailInfo.region.icon)"
                    class="size-full"
                    alt="Region icon"
                    title="Game region indicator"
                    loading="lazy"
                  />
                </div>
                <span class="font-normal text-[0.88rem] text-white">
                  {{ detailInfo.region.name || '--' }}
                </span>
              </div>
              <div class="flex flex-wrap gap-4 items-center">
                <div
                  class="bg-[rgba(255,255,255,0.2)] rounded-[0.13rem] lg:px-3 p-1 flex items-center justify-center"
                  v-for="(item, index) in [...detailInfo.game_type]"
                  :key="index"
                >
                  <span class="font-normal lg:text-[0.75rem] text-[0.63rem] text-white capitalize whitespace-nowrap">
                    {{ item.name }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <!--  -->
        <!--  -->
      </div>
      <div class="lg:px-0 px-4 mx-auto max-w-7xl">
        <div class="lg:grid-cols-10 lg:gap-12 grid grid-cols-1 gap-6">
          <div class="lg:col-span-3 flex flex-col col-span-1 gap-4">
            <!-- 游戏信息 -->
            <!-- 游戏信息 -->
            <!-- 游戏信息 -->
            <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize">
              {{ $t('pages.gameInfo') }}
            </h2>
            <div class="flex flex-col gap-2">
              <div class="flex gap-2 items-center">
                <div v-for="(i, k) in detailInfo.category" :key="k" class="flex gap-1 items-center">
                  <div class="size-4">
                    <img :src="$globalFn.imgPrefixUrl(i.pic_image)" alt="category" class="size-full object-cover" loading="lazy" />
                  </div>
                  <span class="text-[0.75rem] text-[#666666] capitalize">{{ i.name }}</span>
                </div>
              </div>
              <div class="flex gap-2 items-center">
                <div class="text-[0.88rem] text-[#999999] capitalize">{{ $t('formItem.region') }}:</div>
                <div class="text-[0.88rem] text-[#666666] capitalize">
                  {{ detailInfo.region_name || '--' }}
                </div>
              </div>
              <div class="flex gap-2 items-center">
                <div class="text-[0.88rem] text-[#999999]">{{ $t('formItem.lange') }}:</div>
                <div class="text-[0.88rem] text-[#666666]">
                  {{ detailInfo.language || '--' }}
                </div>
              </div>
              <div class="flex gap-2 items-center">
                <div class="text-[0.88rem] text-[#999999]">{{ $t('formItem.releasDate') }}:</div>
                <div class="text-[0.88rem] text-[#666666]">
                  {{ detailInfo.release_date || '--' }}
                </div>
              </div>
            </div>
            <!-- 游戏描述  -->
            <!-- 游戏描述 -->
            <!-- 游戏描述 -->
            <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize">
              {{ $t('pages.gameDesc') }}
            </h2>
            <div class="simditor">
              <div class="simditor-body overflow-hidden">
                <div v-html="detailInfo.about"></div>
              </div>
            </div>
            <!-- 游戏视频 -->
            <!-- 游戏视频 -->
            <!-- 游戏视频 -->
            <template v-if="detailInfo.video_url">
              <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize">
                {{ $t('pages.gamevideo') }}
              </h2>
              <div class="aspect-video overflow-hidden bg-gray-500 rounded-lg">
                <video :src="detailInfo.video_url"></video>
              </div>
            </template>
            <!-- 分享 -->
            <!-- 分享 -->
            <!-- 分享 -->
            <!-- <h2
              class="font-medium text-[1.25rem] text-[#121212] hidden lg:flex"
            >
              Share this:
            </h2>
            <div class="lg:flex hidden gap-4 items-center">
              <div v-for="(i, k) in 5" :key="k">
                <div class="size-[2rem] bg-gray-500"></div>
              </div>
            </div>  -->
            <LazyH5share type="1"></LazyH5share>
            <div></div>
          </div>
          <div class="lg:col-span-7 max-lg: flex flex-col col-span-1 gap-4">
            <!-- 游戏直充 -->
            <!-- 游戏直充 -->
            <!-- 游戏直充 -->
            <template v-if="detailInfo.card">
              <h2 class="font-medium text-[1.25rem] text-[#121212]">{{ detailInfo.title }} - - {{ $t('pages.gamedirectcharging') }}</h2>
              <div class="lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-2 grid grid-cols-1 gap-4">
                <nuxt-link
                  class="bg-[#FAF9F9] rounded-[1rem] p-3 flex items-center gap-3"
                  v-for="item in detailInfo.card"
                  :key="item.id"
                  :to="localePath(`/product/${item.code}`)"
                >
                  <div
                    class="size-[4rem] shadow-[0rem_0.13rem_0.25rem_0rem_rgba(3,7,18,0.2)] rounded-[0.88rem] border-[0.06rem] border-solid border-[#FFFFFF]"
                  >
                    <img
                      loading="lazy"
                      class="size-full"
                      :src="$globalFn.imgPrefixUrl(item.image, '90:120')"
                      :title="`${item.goods_name}`"
                      :alt="`${item.goods_name}`"
                    />
                  </div>
                  <div class="flex flex-col">
                    <span class="font-medium text-[0.81rem] text-[#121212]">
                      {{ item.goods_name }}
                    </span>
                    <span class="font-medium text-[0.75rem] text-[#666666]">
                      {{ item.region && item.region.name ? item.region.name : '' }}
                    </span>
                  </div>
                </nuxt-link>
              </div>
            </template>
            <!-- 游戏点卡 -->
            <!-- 游戏点卡 -->
            <!-- 游戏点卡 -->
            <template v-if="detailInfo.cards">
              <h2 class="font-medium text-[1.25rem] text-[#121212] lg:mt-8 mt-4 capitalize w-full">
                {{ detailInfo.title }} - {{ $t('pages.gamepointscard') }}
              </h2>
              <div v-for="(i, k) in detailInfo.cards" :key="k" class="flex flex-col gap-4 w-full">
                <div class="flex flex-col gap-2">
                  <div class="text-[0.88rem] text-[#666666] capitalize">
                    {{ i.brand_name }}
                  </div>
                  <div class="w-full border-t"></div>
                </div>
                <div class="lg:grid lg:grid-cols-4 max-lg:flex max-lg:overflow-x-scroll gap-4">
                  <nuxt-link
                    v-for="(ii, kk) in i.list"
                    :key="kk"
                    :to="localePath(`/product/${ii.code}`)"
                    class="max-lg:w-2/5 group flex flex-col flex-none gap-3"
                  >
                    <div class="size-[5rem] bgg">
                      <div class="size-[4.5rem] rounded-[0.88rem] border border-solid border-[#E6E6E6] bg-white overflow-hidden">
                        <img
                          :src="$globalFn.imgPrefixUrl(ii.image, 'goods_thumb_1_1')"
                          loading="lazy"
                          class="size-full group-hover:scale-110 object-cover duration-300"
                          :alt="ii.goods_name"
                          :title="ii.goods_name"
                        />
                      </div>
                    </div>
                    <div class="flex flex-col">
                      <span class="text-[0.75rem] text-[#121212] line-clamp-1">
                        {{ ii.goods_name }}
                      </span>
                      <span class="text-[0.75rem] text-[#666666]">
                        {{ ii?.region?.name || '' }}
                      </span>
                    </div>
                  </nuxt-link>
                </div>
              </div>
            </template>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'gameDetails',
    key(route) {
      return route.fullPath
    },
    head() {
      return {
        title: this.detailInfo.seo_title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.detailInfo.seo_description
          }
        ]
      }
    },
    data() {
      return {
        loading: true, // 页面加载状态
        detailInfo: {} // 游戏详情信息对象
      }
    },
    created() {},
    async asyncData({ app, params: { code }, error }) {
      // 获取游戏详情数据
      try {
        const data = await app.$axios.get(`/api/game/read?code=${code}`)
        return {
          detailInfo: data,
          loading: false
        }
      } catch (err) {
        error({ statusCode: err.code, message: err.msg })
      }
    },
    methods: {
      // 收藏/取消收藏
      async collectFn() {
        const url = this.detailInfo.is_collect ? '/api/collect/cancel' : '/api/collect/add'
        await this.$axios.post(
          url,
          { goods_id: this.detailInfo.id },
          {
            setConfig: { showSuccessMsg: !this.detailInfo.is_collect }
          }
        )
        this.detailInfo.is_collect = !this.detailInfo.is_collect
        this.$store.dispatch('user/getCollectList')
      },
      // 跳转到游戏充值页
      gameRechargeDetail(item) {
        this.$router.push({
          path: this.localePath(`/game-recharge/${item.code}`)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  // @import "~/assets/css/simditor.css";
  .bgg {
    background: linear-gradient(180deg, #fff 50%, #e5e5e6 100%);
    border-radius: 0.88rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
